<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>mine</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/common.css">
  <script src="js/src.js"></script>
  <style>
    html {
      background: #fff;
    }

    .el-row {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e7e7e7;
    }

    .el-col {
      display: flex;
      padding: 7px 0;
      align-items: center;
      justify-content: space-between;
    }

    .el-col:nth-of-type(odd) {
      padding-left: 12px;
      color: #999;
    }

    .el-col:nth-of-type(even) {
      padding-right: 12px;
    }

    .el-button {
      width: 94%;
      margin-left: 3%;
      margin-top: 24px;
      color: #fff !important;
      background: #EA544A !important;
      border: none;
    }

    .el-select {
      flex: none;
      width: 89px;
      margin-bottom: 7px;
    }

    .el-image {
      width: 60px;
      height: 60px;
    }
    .el-date-editor.el-input{
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="nativebar">
      <a href="./mine.html">
        <i class="el-icon-arrow-left" style="font-size: 20px;"></i>
      </a>
      <span>基本信息</span>
      <span></span>
    </div>
    <div style="height: 50px;"></div>
    <el-row>
      <el-col :span='6'>昵称</el-col>
      <el-col :span='18'>
        <el-input v-model='name'></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='6'>手机号</el-col>
      <el-col :span='18'>
        <el-input type='number' v-model='tel'></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='6'>密码</el-col>
      <el-col :span='18'>
        <el-input type='password' v-model='password'></el-input>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span='6'>头像</el-col>
      <el-col :span='18'>
        <el-image :src='imgPath'></el-image>
        <el-upload class="upload-demo" action="aaa" multiple :limit="1" :show-file-list='false' :file-list="fileList">
          <el-link :underline='false' type="primary">上传</el-link>
        </el-upload>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='6'>年龄</el-col>
      <el-col :span='18'>
        <el-input type='number' v-model='age'></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='6'>性别</el-col>
      <el-col :span='18'>
        <el-radio-group v-model="sex">
          <el-radio :label="0">未知</el-radio>
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='6'>住所</el-col>
      <el-col :span='18' style="flex-wrap: wrap;">
        <el-select v-model="sheng" placeholder="请选择省" @change='change'>
          <el-option v-for="item in cityareaArr" :key="item.provinceCode" :label="item.province"
            :value="item.provinceCode">
          </el-option>
        </el-select>
        <el-select v-model="shi" placeholder="请选择市" @focus='shifoc'>
          <el-option v-for="item in cityArr" :key="item.cityCode" :label="item.city" :value="item.cityCode">
          </el-option>
        </el-select>
        <el-select v-model="xian" placeholder="请选择县" @focus='xianfoc'>
          <el-option v-for="item in xianArr" :key="item.countyCode" :label="item.county" :value="item.countyCode">
          </el-option>
        </el-select>
        <el-input type='text' v-model='xiangqing'></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='6'>注册时间</el-col>
      <el-col :span='18'>
        <el-date-picker v-model="regDate" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-col>
    </el-row> -->
    <a href="./mine.html">
      <el-button>保存</el-button>
    </a>
  </div>
</body>
<script src="./area.js"></script>
<script type="module">
  //实例化一个Vue对象
  var vm = new Vue({
    el: "#app",
    data: {
      name: '',
      tel: '',
      password: '',
      imgPath: './image/touxiang.jpg',
      age: '',
      sex: '',
      regDate: '',
      cityareaArr: cityareaArr.root,
      sheng: '',
      shi: '',
      xian: '',
      cityArr: [],
      xianArr: [],
      xiangqing: '',
      fileList: [],
    },
    mounted() {
      // console.log(this.cityareaArr)
    },
    methods: {
      change() {
        this.shi = '';
        this.xian = '';
      },
      shifoc() {
        this.cityArr = [];
        for (let i in this.cityareaArr) {
          if (this.cityareaArr[i].provinceCode == this.sheng) {
            this.cityArr = this.cityareaArr[i].cities
          }
        }
        console.log('this.cityArr', this.cityArr)
      },
      xianfoc() {
        this.xianArr = []
        console.log('this.cityArr', this.cityArr)
        console.log('this.shi', this.shi)
        for (let i in this.cityArr) {
          if (this.cityArr[i].cityCode == this.shi) {
            this.xianArr = this.cityArr[i].counties
          }
        }
        console.log('this.xianArr', this.xianArr)
      }
    }
  });
</script>

</html>